import React, { useEffect, useState } from 'react'
import { Descriptions, PageHeader } from 'antd';
import moment from 'moment';
import style from './News.module.css'
import { getArticle } from "../../../api/api"

export default function NewsPreview(props) {
    const [newsInfo, setNewsInfo] = useState(null)
    useEffect(() => {
        const httpRequest = async () => {
            //获取文章
            const res = await getArticle({
                id: props.match.params.id
            })
            setNewsInfo(res.data.data[0])
        }
        httpRequest()
    }, [props.match.params.id])
    const auditList = ["未审核", "审核中", "已通过", "未通过"]
    const publishList = ["未发布", "待发布", "已上线", "已下线"]
    const colorList = ["", "orange", "green", "red"]
    return (
        <div>
            {
                newsInfo && <div>
                    <PageHeader
                        onBack={() => window.history.back()}
                        title={newsInfo.title}
                        subTitle={newsInfo.classifyName}
                    >
                        <Descriptions size="small" column={3}>
                            <Descriptions.Item label="创建者">{newsInfo.nickname}</Descriptions.Item>
                            <Descriptions.Item label="创建时间">{moment(newsInfo.createTime).format("YYYY/MM/DD HH:mm:ss")}</Descriptions.Item>
                            <Descriptions.Item label="发布时间">{newsInfo.publishTime ? moment(newsInfo.publishTime).format("YYYY/MM/DD HH:mm:ss") : "-"}</Descriptions.Item>
                            <Descriptions.Item label="审核状态"><span style={{ color: colorList[newsInfo.auditState] }}>{auditList[newsInfo.auditState]}</span></Descriptions.Item>
                            <Descriptions.Item label="发布状态"><span style={{ color: colorList[newsInfo.publishState] }}>{publishList[newsInfo.publishState]}</span></Descriptions.Item>
                            <Descriptions.Item label="访问数量">{newsInfo.look_num}</Descriptions.Item>
                            <Descriptions.Item label="点赞数量">{newsInfo.like_num}</Descriptions.Item>
                            <Descriptions.Item label="评论数量">0</Descriptions.Item>
                        </Descriptions>
                    </PageHeader>
                    <div style={{
                        margin: '0 24px 10px'
                    }}>
                        <h3 style={{fontWeight:'bold'}}>介绍：</h3>
                        <span>{newsInfo.introduce}</span>
                    </div>
                    <div style={{
                        display: newsInfo.vip ? '' : 'none',
                        margin: '0 24px 10px'
                    }}>
                        <h3 style={{fontWeight:'bold'}}>会员资源：</h3>
                        <span>链接：{newsInfo.vipContent?.split(',')[0]}</span><br></br>
                        <span>验证码：{newsInfo.vipContent?.split(',')[1]}</span>
                    </div>
                    <div dangerouslySetInnerHTML={{
                        __html: newsInfo.content
                    }} className={style.infoContent} style={{
                        display: newsInfo.articleClassifyId === 3 ? '' : 'none',
                        margin: "0 24px",
                        border: "1px solid #000"
                    }}>
                    </div>
                    <div style={{
                        display: newsInfo.articleClassifyId !== 3 ? '' : 'none',
                        margin: "0 24px",
                        border: "1px solid #000"
                    }}>
                        {
                            newsInfo.content.split(',').map((item, index) => <img alt='' src={newsInfo.imgHost + item} key={index}
                                style={{
                                    width: newsInfo.articleClassifyId === 2 ? '50%' : '100%'
                                }} />)
                        }
                    </div>
                </div>
            }
        </div>
    )
}
